<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index_extend_3</title>
    <style>
    .alert {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
    }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
<!--     <div class="alert">这里是alert框</div>
    <div class="alert">
        <h2>我是标题</h2>这里是带标题alert框</div>
    <div class="alert">
        <h2>我是标题和按钮的alert</h2>这里是带标题alert框
        <input type="button" value="点击我">
    </div> -->
    <script type="text/javascript">
    var arr = [];
    var slice = arr.slice;

    function create() {
        if (arguments.length == 0 || arguments.length > 2) {
            throw '参数错误';
        }

        var parent = null;
        //将参数转换为数组
        //将具有length属性的对象转化成数组
        var properties = slice.call(arguments);
        // console.log(arguments);

        var oo = {
            length: 3,
            0: "8",
            1: "9"
        }
        var p = slice.call(oo);

        // console.log(arguments instanceof Array) false

        //如果第一个参数为类（function），那么就将之取出
        if (typeof properties[0] === 'function') {
            parent = properties.shift();
        }
        //第二参数
        properties = properties[0];


        function klass() {
            this.initialize.apply(this, arguments);
        }

        klass.superclass = parent;
        klass.subclasses = [];

        if (parent) {

            var subclass = function() {};
            subclass.prototype = parent.prototype;
            klass.prototype = new subclass;
            parent.subclasses = [];
            parent.subclasses.push(klass);
        }

        var ancestor = klass.superclass && klass.superclass.prototype;
        // console.log(properties)
        for (var k in properties) {
            var value = properties[k];

            //满足条件就重写
            if (ancestor && typeof value == 'function') {
                var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/i, '').split(',');

                //只有在第一个参数为$super情况下才需要处理（是否具有重复方法需要用户自己决定）
                if (argslist[0] === '$super' && ancestor[k]) {
                    value = (function(methodName, fn) {
                        return function() {
                            var scope = this;
                            var args = [function() {
                                return ancestor[methodName].apply(scope, arguments);
                            }];
                            return fn.apply(this, args.concat(slice.call(arguments)));
                        }
                    })(k, value);
                }
            }

            klass.prototype[k] = value;

        }

        if (!klass.prototype.initialize)
            klass.prototype.initialize = function() {};

        klass.prototype.constructor = klass;

        return klass;
    }
    // var oo = {};
    // var A = function(){
    // 	this.name = "1"
    // }
    // var B = function(){
    // 	this.age = "23";
    // }
    // oo.b = B;
    // create(A,oo)

    // var str="I love antzone ,this is animate"; 
    // var reg=/an/;
    // var ab = reg.exec(str);
    // console.log(ab);


    // ********************************************

    var AbstractView = create({
        initialize: function(opts) {
            opts = opts || {};
            this.wrapper = opts.wrapper || $('body');

            //事件集合
            this.events = {};

            this.isCreate = false;
        },
        on: function(type, fn) {
            if (!this.events[type]) this.events[type] = [];
            this.events[type].push(fn);
        },
        trigger: function(type) {
            if (!this.events[type]) return;
            for (var i = 0, len = this.events[type].length; i < len; i++) {
                this.events[type][i].call(this)
            }
        },
        createHtml: function() {
            throw '必须重写';
        },
        create: function() {
            this.root = $(this.createHtml());
            this.wrapper.append(this.root);
            this.trigger('onCreate');
            this.isCreate = true;
        },
        show: function() {
            if (!this.isCreate) this.create();
            this.root.show();
            this.trigger('onShow');
        },
        hide: function() {
            this.root.hide();
        }
    });

    // ******************************************
    var Alert = create(AbstractView, {

        createHtml: function() {
            return '<div class="alert">这里是alert框</div>';
        }
    });

    // ****************************************
    var AlertTitle = create(Alert, {
        initialize: function($super) {
            this.title = '';
            $super();

        },
        createHtml: function() {
            return '<div class="alert"><h2>' + this.title + '</h2>这里是带标题alert框</div>';
        },

        setTitle: function(title) {
            this.title = title;
            this.root.find('h2').html(title)
        }

    });

    // *********************************************

    var AlertTitleButton = create(AlertTitle, {
        initialize: function($super) {
            this.title = '';
            $super();

            this.on('onShow', function() {
                var bt = $('<input type="button" value="点击我" />');
                bt.click($.proxy(function() {
                    alert(this.title);
                }, this));
                this.root.append(bt)
            });
        }
    });

    // ************
    // ************
    var v1 = new Alert();
    v1.show();

    var v2 = new AlertTitle();
    v2.show();
    v2.setTitle('我是标题');

    var v3 = new AlertTitleButton();
    v3.show();
    v3.setTitle('我是标题和按钮的alert');
    </script>
</body>

</html>
